<template>
  <el-row>
    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
      <div class="musicHall_navBar">
        <ul>
          <li v-for="item in label" :key="item.id">
            <router-link :to="item.path">{{item.name}}</router-link>
          </li>
        </ul>
        <router-view></router-view>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "MusicHall",
  data() {
    return {
      label: [
        { id: 1, name: "首页", path: "/MusicHall/Page" },
        { id: 2, name: "歌手", path: "/MusicHall/Songer" },
        { id: 3, name: "专辑", path: "/MusicHall/Album" },
        { id: 4, name: "MV", path: "/MusicHall/MV" },
        { id: 5, name: "歌单", path: "/MusicHall/SongSheet" },
        { id: 6, name: "排行榜", path: "/MusicHall/RankingList" }
      ],
      active: 0,
    }
  }
}
</script>

<style scoped>
.musicHall_navBar {
  width: 100%;
  height: 100%;
}
.musicHall_navBar ul {
  display: table;
  list-style-type: none;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}
.musicHall_navBar ul li {
  float: left;
  margin: 0 40px;
}
a {
  text-decoration: none;
  color: black;
}
a:hover {
  color: RGB(64, 158, 255);
}
.router-link-active {
  color: RGB(64, 158, 255);
}
</style>